<template>
  <div class="list-table">
    <div class="area-header">
      <span class="area-header-title"> {{ $t('意向投资人') }}</span>
    </div>
    <el-form ref="queryForm" :model="queryParams" :inline="true" @submit.native.prevent>
      <el-form-item :label="$t('出资人类型')" prop="investorType">
        <el-select v-model="queryParams.investorType" filterable :placeholder="$t('出资人类型')" clearable>
          <el-option
            v-for="dict in investorTypeOptions"
            :key="dict.dictValue"
            :label="$t(dict.dictLabel)"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('出资人')">
        <el-input
          v-model="queryParams.investorName"
          :placeholder="$t('出资人')"
          clearable
          @keyup.enter.native="queryHandle"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle">{{ $t("搜索") }}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t("重置") }}</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['fund:intentionInvest:edit']"
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="addHandle"
        >{{ $t("新增") }}</el-button>
      </el-col>
    </el-row>
    <div class="fundIntentionInvest">
      <ul>
        <li v-for="info in fundIntentionInvestList" :key="info.index">
          <div class="content">
            <div v-if="info.investorType === 'JG' || info.investorType === 'GR'" class="main" @click="updateHandle(info)">
              <div class="top">
                <router-link
                  target="_blank"
                  :to="{path:'/fund/lpBase/lpBaseHome',query:{lpId:info.investorId}}"
                  class="link_a"
                  @click.native.stop="recorePath({ fromPath: $route.fullPath, path:'/fund/lpBase/lpBaseHome',query:{lpId:info.investorId}})"
                >
                  <span class="nickName">{{ info.investorName }}</span>
                </router-link>
              </div>
              <div class="otherPeople"><span>{{ $t('意向出资金额') }}{{ $t('金额单位') }}</span>: <p>{{ moneyFormat(info.amountIntention ,'w') }}</p></div>
              <div class="otherPeople"><span>{{ $t('最新跟踪时间') }}</span>: <p class="time">{{ parseTime(info.happenDate) }}</p></div>
              <div class="otherPeople"><span>{{ $t('详细情况') }}</span>:<p v-html="formatText(info.trackRemark)" /></div>
              <div class="otherPeople"><span>{{ $t('下步计划') }}</span>:<p v-html="formatText(info.nextPlan)" /></div>
            </div>
            <div v-else class="main" @click="updateHandle(info)">
              <div class="top">
                <router-link
                  target="_blank"
                  :to="{path:'/fund/fundBasehome',query:{id:info.investorId}}"
                  class="link_a"
                  @click.native.stop="recorePath({ fromPath: $route.fullPath, path:'/fund/fundBasehome',query:{id:info.investorId}})"
                >
                  <span class="nickName">{{ info.investorName }}</span>
                </router-link>
              </div>
              <div class="fund-list-info-main">
                <div class="fund-list-info"><span>{{ $t('意向出资金额') }}{{ $t('金额单位') }}: {{ moneyFormat(info.amountIntention ,'w') || '-' }}</span></div>
                <div class="fund-list-info"><span>{{ $t('最终认缴金额') }}: {{ moneyFormat(info.finalAmount) || '-' }}</span></div>
              </div>
              <div class="fund-list-info-main">
                <div class="fund-list-info"><span>{{ $t('预计认缴时间') }}: {{ parseTime(info.estimatedTime) || '-' }}</span></div>
                <div class="fund-list-info"><span>{{ $t('最终认缴日期') }}: {{ parseTime(info.finalDate) || '-' }}</span></div>
              </div>
              <div class="fund-list-info-main">
                <div class="fund-list-info"><span>{{ $t('募集阶段') }}: {{ lpStageFormat(info.lpStage) || '-' }}</span></div>
              </div>
            </div>
            <div class="btn">
              <el-button
                size="small"
                type="text"
                style="margin-left: 10px"
                :disabled="info.investorType !== 'JG' && info.investorType !== 'GR'"
                @click="findTrack(info)"
              >{{ $t('全部跟踪') }}</el-button>
              <el-button
                v-hasPermi="['fund:intentionInvest:edit']"
                size="small"
                type="text"
                @click="updateHandle(info)"
              >{{ $t('修改') }}</el-button>
              <el-button
                v-hasPermi="['fund:intentionInvest:remove']"
                size="small"
                type="text"
                @click="deleteHandle(info)"
              >{{ $t('删除') }}</el-button>
              <el-button
                v-hasPermi="['fund:intentionInvest:edit']"
                size="small"
                type="text"
                @click="changeInvestHandle(info)"
              >{{ $t('转为出资人') }}</el-button>
            </div>
          </div>
        </li>
      </ul>
    </div>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改意向投资人对话框 -->
    <el-dialog :title="title" :visible.sync="formOpen" :close-on-click-modal="false" :lock-scroll="false" custom-class="dialogForm" append-to-body>
      <fundIntentionInvestForm ref="fundIntentionInvestForm" />
    </el-dialog>
    <!-- 添加或修改意向投资人对话框 -->
    <el-dialog :title="title" :visible.sync="investFormOpen" :close-on-click-modal="false" :lock-scroll="false" custom-class="dialogForm" append-to-body>
      <fundInvestorForm ref="fundInvestorForm" />
    </el-dialog>
    <!-- 意向投资人全部跟踪对话框 -->
    <el-dialog :visible.sync="trackOpen" :title="title" width="80%" :close-on-click-modal="false" custom-class="dialogNewPattern" :lock-scroll="false" append-to-body>
      <lpTrackList ref="lpTrackList" :lp-id="lpId" />
    </el-dialog>
    <OnlinePreview ref="OnlinePreview" :preview-tit="previewTit" />
  </div>
</template>

<script>
import { listFundIntentionInvest, delFundIntentionInvest, exportFundIntentionInvest } from '@/api/fund/intentionInvest/fundIntentionInvest'
import fundIntentionInvestForm from './fundIntentionInvestForm.vue'
import fundInvestorForm from '@/views/fund/investor/fundInvestorForm'
import lpTrackList from '@/views/fund/lpTrack/lpTrackList'
export default {
    components: {
        fundIntentionInvestForm,
        fundInvestorForm,
        lpTrackList
    },
  data() {
      return {
          // 遮罩层
          loading: true,
          // 总条数
          total: 0,
          // 意向投资人表格数据
          fundIntentionInvestList: [],
          // 出资人类型字典
          investorTypeOptions: [],
          // 弹出层标题
          title: '',
          // 是否显示弹出层
          formOpen: false,
          investFormOpen: false,
          trackOpen: false,
          lpId: undefined,
          // 查询参数
          queryParams: {
              investorName: undefined,
              fundId: this.$route.query.id,
              pageNum: 1,
              pageSize: 10
          },
          // 表单参数
          form: {},
          // 表单校验
          rules: {
          },
         previewTit: '',
          lpStageOption: []
      }
  },
  created() {
      this.getList()
      this.getDicts('lp_type_intended').then(response => {
        this.investorTypeOptions = response.data
      })
      this.getDicts('crm_lp_stage').then(response => {
        this.lpStageOption = response.data
      })
  },
  methods: {
    formatText(text) {
      if (text) {
        var val = text.replace(/\n/g, '</li><li>')
        return '<ul class="ul_style"><li>' + val + '</li></ul>'
      } else {
        return text
      }
    },
    /** 查询意向投资人列表 */
    getList() {
        this.loading = true
        listFundIntentionInvest(this.queryParams).then(response => {
            this.fundIntentionInvestList = response.rows
            this.total = response.total
            this.loading = false
        })
    },
    // 出资人类型字典翻译
    investorTypeFormat(row) {
      return this.selectDictLabel(this.investorTypeOptions, row.investorType)
    },
    // 表单重置
    reset() {
        this.form = {
            id: undefined,
            fundId: undefined,
            investorId: undefined,
            investorType: undefined,
            estimatedTime: undefined,
            amountIntention: undefined,
            finalAmount: undefined,
            finalDate: undefined,
            bankName: undefined,
            bankNumber: undefined,
            accountBank: undefined,
            branch: undefined,
            remark: undefined,
            createBy: undefined,
            createTime: undefined,
            updateBy: undefined,
            updateTime: undefined,
            delFlag: undefined
        }
        this.resetForm('form')
    },
    lpStageFormat(val) {
      return this.selectDictLabel(this.lpStageOption, val)
    },
    /** 搜索按钮操作 */
    queryHandle() {
        this.queryParams.pageNum = 1
        this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
        this.queryParams.investorName = undefined
        this.resetForm('queryForm')
        this.queryHandle()
    },
    /** 新增按钮操作 */
    addHandle() {
        this.formOpen = true
        this.title = this.$t('添加意向投资人')
        this.$nextTick(() => {
            this.$refs.fundIntentionInvestForm.init(null)
        })
    },
    /** 修改按钮操作 */
    updateHandle(row) {
        this.formOpen = true
        this.title = this.$t('修改意向投资人')
        this.$nextTick(() => {
            // 调用form页面的 init 方法初始化数据
            this.$refs.fundIntentionInvestForm.init(row)
        })
    },
    /** 删除按钮操作 */
    deleteHandle(row) {
        this.$confirm(this.$t('是否确认删除?'), this.$t('警告'), {
            confirmButtonText: this.$t('确定'),
            cancelButtonText: this.$t('取消'),
            type: 'warning'
        }).then(function() {
            return delFundIntentionInvest(row.id)
        }).then(() => {
            this.getList()
            this.msgSuccess(this.$t('删除成功'))
        }).catch(function() {
        })
    },
    /** 转换成投资人信心按钮操作 */
    changeInvestHandle(row) {
      this.investFormOpen = true
      this.title = this.$t('出资人信息')
      this.$nextTick(() => {
        // 调用form页面的 copeHandle 方法初始化数据
        this.$refs.fundInvestorForm.changeInvest(row)
      })
    },
    /** 导出按钮操作 */
    exportHandle() {
        const queryParams = this.queryParams
        this.$confirm(this.$t('是否确认导出所有意向投资人数据项') + '?', this.$t('警告'), {
            confirmButtonText: this.$t('确定'),
            cancelButtonText: this.$t('取消'),
            type: 'warning'
        }).then(function() {
            return exportFundIntentionInvest(queryParams)
        }).then(response => {
            this.download(response.msg)
        }).catch(function() {
        })
    },
    preview(fileId) {
      this.$refs.OnlinePreview.onlinePreviewFile(fileId, 'view')
    },
    /**
     * 查询全部跟踪
     */
    findTrack(row) {
      this.trackOpen = true
      this.title = row.investorName + ' - ' + this.$t('出资人跟踪')
      this.lpId = row.investorId
      this.$nextTick(() => {
        this.$refs.lpTrackList.getList()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/.dialogNewPattern {
  width: 90% !important;
  height: 90%;
  overflow: hidden;
  top: 5% !important;
  margin-top: unset !important;
  .el-dialog__body {
    min-height: 400px;
    overflow: auto;
    height: 85%;
    margin-bottom: 10px;
  }
}
.otherFile{
  color: rgba(0, 0, 0, 0.8);
  font-size: 13px;
  display: flex;
  span{
    color: rgba(0, 0, 0, 0.65);
    white-space: nowrap;
  }
  .file{
    margin-left: 10px;
    p{
      line-height: 20px;
      margin: 0 0 5px;

      &:last-child{
        margin: 0;
      }
    }
  }

}
.click_file{
  color:#409EFF;
  cursor: pointer;
  display: block !important;
}

.fundIntentionInvest{
  // box-shadow: 0 2px 12px 0 #eee;
  border-radius: 10px;
  margin: 10px 0;
  padding: 25px 100px 25px 25px;
  p{
    margin: 0;
  }
  ul{
    li{
      position: relative;
      border-left: 1px solid #E1E2E8;
      padding-left: 30px;
      padding-bottom: 20px;
      //.time{
      //  position: absolute;
      //  left: -100px;
      //  font-size: 14px;
      //  top: calc(50% - 12px);
      //}
      .top{
        display: flex;
        align-items: center;
        column-gap: 10px;
        margin-bottom: 10px;
        .nickName{
          font-weight: bold;
          font-size: 14px;
        }
        .track{
          background: #9288D0;
          color: #fff;
          font-size: 13px;
          border-radius: 10px;
          padding: 3px 6px;
        }
        .type{
          background: #59D6CD;
          color: #fff;
          font-size: 13px;
          border-radius: 10px;
          padding: 3px 6px;
        }
      }
      .otherPeople{
        color: rgba(0, 0, 0, 0.8);
        font-size: 13px;
        display: flex;
        span{
          color: rgba(0, 0, 0, 0.65);
          white-space: nowrap;
        }
        p{
          margin-left: 5px;
          line-height: 16px;
          overflow-wrap: anywhere;
        }
      }
      .details{
        color: #F4A9A2;
      }
      .main{
        background-color: #F4F7F6;
        border-radius: 10px;
        padding: 15px;
        flex: 1;
        position: relative;
        &::before{
          position: absolute;
          content: '';
          width:0;
          height:0;
          border-top:10px solid transparent;
          border-bottom:10px solid transparent;
          border-right:10px solid #F4F7F6;
          left: -10px;
          top: calc(50% - 5px);
        }
        div{
          margin-bottom: 10px;
          line-height: 16px;
          &:last-child{
            margin-bottom: 0;
          }
        }
      }
      .content{
        display: flex;
        align-items: center;
        .btn{
          //align-items: center;
          width: 70px;
          text-align: left;
          margin-left: 10px;
        }
      }
      &::before{
        position: absolute;
        content: '';
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #fff;
        border: 1px solid #E1E2E8;
        left: -6px;
        top: calc(50% - 10px);
      }
    }
  }
}

.el-tooltip__popper{ max-width:50% }

.fund-list-info-main {
  display: flex;
  font-size: 13px;
}
.fund-list-info {
  width: 50%;
}
</style>
